6. eventhandler
6.3 eventhandler dokumentbezogen
startfunktion
Anspruchsvoller ist es, mit eventhandlern zu arbeiten, die
auf das aktuelle dokument, d.h. die gerade geladene seite bezogen sind.
Beispielsweise soll jedesmal eine funktion ausgeführt werden, wenn an einer
liebigen stelle der angezeigten seite mit der maus geklickt wird oder wenn
der mauszeiger bewegt wird usw. In diesem fall müssen entsprechende
vereinbarungen schon beim laden der seite getroffen werden, d.h. man
benötigt eine funktion, die beim laden der seite ausgeführt wird. Diese
funktion wird im header der seite definiert. Der aufruf der funktion erfolgt
im body-tag, das mit dem eventhandler onload verbunden wird
<body onload="init()">
oder durch eine spezielle anweisung im header.
window.onload = init;
Zu beachten ist, dass bei der anweisung im header der name der funktion ohne die runden klammern anzugeben ist.
In der startfunktion wird für jeden benötigten eventhandler die zugehörige funktion vereinbart. Auch hier wird der name der funktion ohne die runden klammern angegeben.
document.eventhandler = funktion;
funktionen für eventhandler
Eine funktion, die von einem eventhandler ausgeführt wird, erhält als
parameter eine referenz auf das objekt das den eventhandler auslöst. Die
bezeichnung des parameters kann frei gewählt werden.
function name(par)
Mit hilfe des parameters kann auf die eigenschaften des objekts zugegriffen werden. Hier eine auswahl der wichtigsten eigenschaften
| eigenschaft | bedeutung |
|---|---|
| type | typ des events als zeichenkette |
| clientX, clientY | horizontale und vertikale koordinaten des objekts in der seite |
| pageX, pageY | alternative zu clientX, clientY |
| screenX, screenY | horizontale und vertikale koordinaten am bildschirm hinweise beachten |
| button | betätigte maustaste: 0 - links, 1 - mitte, 2 - rechts |
| which | betätigte maustaste: 1 - links, 2 - mitte, 3 – rechts |
| which | siehe hinweis |
| charCode | siehe hinweis |
| keyCode | siehe hinweis |
| key | siehe hinweis |
| altKey | true wenn Alt-taste zusammen mit taste betätigt nicht getestet |
| ctrlKey | true wenn Strg-taste zusammen mit taste betätigt nicht getestet |
| shiftKey | true wenn umschalt-taste zusammen mit taste betätigt nicht getestet |
| target | verweis auf das tag, das den event ausgelöst hat dazu gibt es zwei eigenschaften |
| target.name | name des tag, falls vorhanden |
| target.id | id des tag, falls vorhanden |
hinweise
Die eigenschaften which, charCode, keyCode, key liefern browserabhängig
unterschiedliche ergebnisse, dabei ist zu unterscheiden zwischen tasten, die
ein zeichen erzeugen, funktionstasten und der entertaste. Die browser
Chrome und Internet Explorer reagieren auf funktionstasten
gar nicht, zumindest nicht mit einem bekannten event. Aus der tabelle läßt
sich ableiten, dass man auf die auswertung von funktionstasten wohl
verzichten muss und ansonsten am besten mit key oder which arbeitet.
beispiel 6b - eventhandler dokumentbezogen Das beispiel zeigt eine seite mit einem umfangreichen formular an.
- Alle elemente der seite haben einen namen, die kleine pfeilgrafik eine ID.
- Die elemente des formulars sind eingabefelder, mit ausnahme des feldes eingabe haben sie aber den status readonly, d.h. es kann etwas angezeigt, aber nichts eingegeben werden.
- Das feld anzeige zeigt an, in welchem feld sich der mauszeiger befindet und ob eine maustaste betätigt wurde, das feld maus zeigt, welche maustaste betätigt wurde und das feld position zeigt die koordinaten des mauszeigers.
- Im feld eingabe kann man tatsächlich etwas eingeben, die eingabe wird im feld ergebnis gezeigt.
- In den feldern char, key, which und keyCode wird angezeigt, welche taste betätigt wurde, soweit das möglich ist.
onload - funktion init
Beim laden der seite wird die durch den eventhandler onload die
funktion init aufgerufen, mit der für einige eventhandler funktionen
vereinbart werden. Außerdem wird in das feld anzeige (ID T1) ein
text eingetragen, der aber nie sichtbar wird, weil das feld sofort beim
laden der seite überschrieben wird.
onmousemove - funktion mmove
Jede bewegung des mauszeigers löst den eventhandler onmousemove aus,
der die funktion mmove aufruft. Die funktion liefert fortlaufend die
position des zeigers und zeigt sie im feld position (ID T4) an.
onmouseover - funktion wechsel
Fast alle elemente (tags) der seite haben einen namen oder eine
id. Wenn der mauszeiger über ein element geführt wird, löst das den
eventhandler onmouseover aus, der die funktion wechsel
aufruft. Die funktion liefert den namen oder die ID des elements. Bei
unbenannten tags oder im "freien" raum der seite wird als name
undefined gemeldet. Die anzeige erfolgt im feld anzeige
(ID T1).
onmousedown - funktion mdown
Wenn eine maustaste gedrückt wird, löst das den eventhandler
onmousedown aus, der die funktion mdown aufruft. Die funktion
ermittel mit der eigenschaft which informationen über den mauszeiger
und zeigt im feld maus (ID T5) welche maustaste gedrückt wurde und
im feld anzeige (ID TZ1) den event-typ und, falls vorhanden, den
namen oder die ID des elements, auf dem der mauszeiger gedrückt wurde.
onclick - funktion mclick
Wenn eine maustaste geklickt wird (drücken und loslassen), löst das den
eventhandler onclick aus, der die funktion mclick aufruft.
Die funktion gleicht der funktion mdown, mit dem kleinen unterschied,
dass die info über die maus¬tasten aus der eigenschaft button
gewonnen wird. Da einem mausklick zwingend ein drücken einer maustaste
vorangeht, werden die beiden funktionen immer nacheinander ausgeführt.
onkeypress - funktion eingabe
Wenn eine taste gedrückt, d.h. ein zeichen eingegeben wird, löst das den
eventhandler onkeypress aus, der die funktion eingabe aufruft.
Die funktion liefert den wert der eigenschaften charCode, key, which
und keyCode in den entsprechenden feldern. Wenn which einen
wert > 0 , d.h. den dezimalcode eines zeichens oder der Enter-taste liefert
und die eingabe in feld eingabe (ID T3) erfolgt, wird der wert mit
CharCode in das entsprechende zeichen umgewandelt und das zeichen in
das feld ergebnis (ID T1) eingetragen. Das eingabe-feld wird
gelöscht. Beim versuch an einer anderen stelle der seite ein zeichen
einzugeben, erfolgt eine fehlermeldung.
EXEC beispiel6b ausführen